<template>
  <div class="myimg">
    <ul>
      <li v-for="(item,i) in imglist" :class="{color:tapindex==i}" :key="i" @click="tap(item,i)">
        <img :src="item" alt />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "myimg",
  props: {
    imglist: {
      type: Array,
      default: () => [],
    },
    tapindex: Number,
  },
  data() {
    return {
      index: -1,
    };
  },
  methods: {
    //   实现 tap  并把img路径传出去
    tap(src, i) {
      this.$emit("srcinit", { src, i });
    },
  },
};
</script>

<style lang="scss" scoped>
.myimg {
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    li {
      width: 19%;
      list-style: none;
      border: 3px solid transparent;
      img {
        width: 100%;
        vertical-align: middle;
        height: 51px;
      }
      &.color {
        border: 3px solid purple;
      }
    }
  }
}
</style>